<template>
  <div class="com-container makeUpEcharts he df">
    <div
      class="com-chart"
      ref="echarts"
      style="width: 100%; height: 200px"
    ></div>
  </div>
</template>
<script>
// import * as echarts from 'echarts'
export default {
  props: ["commonData"],
  data() {
    return {
      chartInstance: null,
      allData: null, // 服务器返回的数据
      //   x轴数据
      xData: null,
      currentPage: 1, //当前显示页数
      totalPage: 0, // 共有多少页
      timerId: null, // 定时器标识
      p1: 0,
    };
  },
  watch: {
    commonData: {
      handler(newVal) {
        if (newVal) {
          console.log("getData", newVal);
          var that = this; // this.$nextTick(() => {

          setTimeout(() => {
            that.getData(newVal);
          }, 1200);
          // });
        }
      },
      immediate: true,
    },

    // activeIndex(val, oldVal) {
    // },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart();

    //   window.addEventListener("resize", this.screenAdapter);
    //   // 在页面加载完成的时候, 主动进行屏幕的适配
    //   this.screenAdapter();
    // });
    setTimeout(() => {
      this.initChart();

      window.addEventListener("resize", this.screenAdapter);
      // 在页面加载完成的时候, 主动进行屏幕的适配
      this.screenAdapter();
    }, 1000);
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.echarts);

      const initOption = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255,255,255,0)", // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255,255,255,1)", // 100% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(255,255,255,0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        },
        grid: {
          top: "18%",
          left: "15%",
          right: "5%",
          bottom: "25%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
            lineStyle: {
                color: '#B4B4B4'
            }
        },
        axisTick:{
            show:false,
        },
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
                color: "#ebf8ac"
            },
            axisLine: {
            lineStyle: {
                color: '#B4B4B4',
            }
        },
          },
        ],
        series: [
          {
            name: "波速",
            type: "line",
            symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbolSize: 8,
            lineStyle: {
              normal: {
                color: '#58c8da'
              },
              borderColor: '#58c8da'
            },
            itemStyle: {
              color: '#58c8da',
              borderColor: '#58c8da',
              borderWidth: 2,
            },

            tooltip: {
              show: true,
            },

            // data: data.num,
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    getData(data) {
      this.updateChart(data);
    },
    // 更新图表
    updateChart(data) {
      console.log(data);

      var dataOption = {
        xAxis: [
          {
            data: data.amplitudeList,
          },
        ],
        series: [
          {
            data: data.waveVelocityList,
          },
        ],
      };

      this.chartInstance.setOption(dataOption);
      // tools.loopShowTooltip(this.chartInstance, dataOption, {
      //   loopSeries: true,
      // });
    },

    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
      // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 4;
      //   和分辨率大小相关的配置项
      const adapterOption = {
        // title: {
        //   x: "center",
        //   y: "center",
        //   textStyle: {
        //     rich: {
        //       a: {
        //         fontSize: titleFontSize * 1.38,
        //       },
        //       c: {
        //         fontSize: titleFontSize,
        //       },
        //     },
        //   },
        // },
        // series: [
        //   {
        //     label: {
        //       // {c}
        //       normal: {
        //         rich: {
        //           aa: {
        //             fontSize: titleFontSize,
        //           },
        //           bb: {
        //             fontSize: titleFontSize,
        //           },
        //         },
        //       },
        //     },
        //     labelLine: {
        //       show: true,
        //       length: titleFontSize * 2,
        //       length2: titleFontSize * 3.9,
        //     },
        //   },
        // ],
      };
      this.chartInstance.setOption(adapterOption);
      // 手动的调用图表对象的resize 才能产生效果
      this.chartInstance.resize();
    },
  },
};
</script>

<style lang="less" scoped></style>
